<template>
	<div class="footer">
		<span class="footer_item" :class="{'active':index == 0}" v-for="(itme, index) in list" :key="index">
			<i class="iconfont" :class="itme.icon"></i>
			<span class="footer_title">{{ itme.text }}</span>
		</span>
	</div>
</template>

<script>
export default {
	name: 'Footer',
	setup () {
		const list = [
			{ icon: 'icon-icon-gohome', text: '首页' },
			{ icon: 'icon-gouwuchekong', text: '购物车' },
			{ icon: 'icon-dingdan', text: '订单' },
			{ icon: 'icon-gerenzhongxindianjiqianx', text: '我的' },
		];
		return {
			list,
		};
	},
};
</script>

<style lang="scss" scoped>
.footer {
	display: flex;
	box-sizing: border-box;
	padding: 0 0.18rem;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0.49rem;
	border-top: 0.01rem solid #f1f1f1;
	.footer_item {
		flex: 1;
		text-align: center;
		.iconfont {
			display: block;
			font-size: 0.18rem;
			margin: 0.07rem 0 0.02rem 0;
		}
		.footer_title {
			font-size: 0.12rem;
		}
	}
	.active {
		color: #1fa4fc;
	}
}
</style>
